import {Button, Input, Modal} from "antd";
import {useEffect, useState} from "react";
import TextArea from "antd/es/input/TextArea";
import RequestUtils from "../../../utils/requestUtils";
import RequestApis from "../../../apis/requestApis";

/**
 * 角色基础信息编辑模态框组件
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const RoleBasicEdit = (props) => {

    const {
        messageApi,
        // 模态框打开标识
        editModalVisible,
        setEditModalVisible,
        // 角色id
        roleId,
        // 角色名
        roleName,
        // 角色描述
        roleDescription,
        // 权限编码
        permissionCodes,
        // 页面编码
        consolePageCodes,
        // 根据id查询角色
        searchRoleById
    } = props;

    // 编辑角色请求参数
    const [editRoleReq, setEditRoleReq] = useState({});

    // 根据id编辑角色资料
    const editRoleById = () => {
        RequestUtils.post(RequestApis.roleManage.editById, {
            id: roleId,
            roleName: editRoleReq.roleName,
            roleDescription: editRoleReq.roleDescription,
            permissionCodes: editRoleReq.permissionCodes,
            webPageCodes: editRoleReq.consolePageCodes
        }).then(res => {
            searchRoleById();
            messageApi.success("编辑角色成功");
            setEditModalVisible({
                ...editModalVisible,
                editRoleBasic: false
            })
        }).catch(err => messageApi.error(err.message))
    }

    useEffect(() => {
        if (editModalVisible) {
            setEditRoleReq({
                id: roleId,
                roleName: roleName,
                roleDescription: roleDescription,
                permissionCodes: permissionCodes,
                consolePageCodes: consolePageCodes
            });
        } else {
            setEditRoleReq({})
        }
        // eslint-disable-next-line
    }, [editModalVisible.editRoleBasic]);

    return (
        <Modal
            open={editModalVisible.editRoleBasic}
            title="编辑角色基本信息"
            onCancel={() => {
                setEditModalVisible({
                    ...editModalVisible,
                    editRoleBasic: false
                });
            }}
            footer={<div>
                <Button
                    type={"primary"}
                    onClick={editRoleById}
                >
                    编辑
                </Button>
                <Button
                    danger={true}
                    style={{marginLeft: "12px"}}
                    onClick={() => {
                        setEditModalVisible({
                            ...editModalVisible,
                            editRoleBasic: false
                        });
                    }}
                >
                    取消
                </Button>
            </div>}
        >
            {/* 优化后的内容区域样式 */}
            <div style={{
                padding: '20px 16px',  // 增加内边距，让内容更舒展
                fontSize: '14px'
            }}>
                {/* 角色名称输入项 */}
                <div style={{
                    marginBottom: '20px',  // 增加项之间的间距
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '8px'  // 标签与输入框的垂直间距
                }}>
                <span style={{
                    color: '#4E5969',  // 标签文字颜色
                    fontWeight: 500,
                    lineHeight: '1.5'
                }}>角色名称</span>
                    <Input
                        value={editRoleReq.roleName}
                        onChange={(e) => {
                            setEditRoleReq({
                                ...editRoleReq,
                                roleName: e.target.value
                            });
                        }}
                        style={{
                            width: '100%',
                            borderRadius: '6px',  // 圆角输入框
                            height: '40px'
                        }}
                    />
                </div>

                {/* 角色描述输入项 */}
                <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '8px'  // 标签与输入框的垂直间距
                }}>
                <span style={{
                    color: '#4E5969',  // 标签文字颜色
                    fontWeight: 500,
                    lineHeight: '1.5'
                }}>角色描述</span>
                    <TextArea
                        rows={4}
                        value={editRoleReq.roleDescription}
                        onChange={(e) => {
                            setEditRoleReq({
                                ...editRoleReq,
                                roleDescription: e.target.value
                            });
                        }}
                        style={{
                            width: '100%',
                            borderRadius: '6px',  // 圆角文本域
                            resize: 'vertical'  // 允许垂直调整大小
                        }}
                    />
                </div>
            </div>
        </Modal>
    );
}

export default RoleBasicEdit;